<template>  
  <section>  
    <!-- 面包屑导航组件 -->  
    <bread-crumb :model-value="navData"></bread-crumb>  
    <!-- 表格组件 -->  
    <table-component ref="tableRef" @show="handleShow"></table-component>  
    <!-- 使用keep-alive搭配动态组件，进行增加、修改组件的缓存 -->  
    <keep-alive>  
      <component   
      :is="getComponent"   
      :rowData="rowData"   
      @close="handleClose"></component>  
    </keep-alive>  
  </section>  
</template>  
  
<script lang="ts" setup>  
import { ref, reactive, computed } from "vue";  
import TableComponent from "@/components/user/UserTable.vue"; // 假设User模块的表格组件路径  
import InsertComponent from "@/components/user/UserInsert.vue"; // 假设User模块的添加组件路径  
import UpdateComponent from "@/components/user/UserUpdate.vue"; // 假设User模块的更新组件路径  
import BreadCrumb from "@/components/public/BreadCrumb.vue";  
  
// 面包屑数据  
const navData = [  
  {  
    name: "用户列表"  
  }  
]  
  
// 关闭/隐藏组件  
const showValue = ref<string>("");  
  
// 表格组件的引用  
const tableRef = ref<any>();  
  
// 要修改的行数据  
const rowData = ref<any>({});  
  
/**  
 * 显示组件  
 * @param value  
 * @param row  
 */  
const handleShow = (value: string, row?: any) => {  
  showValue.value = value;  
  if (row) {  
    rowData.value = row;  
  }  
}  
  
/**  
 * 关闭组件  
 * @param updated 是否有新数据更新（或更新的数据）  
 */  
const handleClose = (updated: boolean | any) => {  
  showValue.value = "";  
  if (updated) {  
    if (tableRef?.value) {  
      tableRef.value.handleReset()  
    }  
  }  
}  
  
// 根据showValue值，获取要显示的组件  
const getComponent = computed(() => {  
  if (showValue.value == "update") {  
    return UpdateComponent;  
  } else if (showValue.value == "insert") {  
    return InsertComponent;  
  } else {  
    return null;  
  }  
})  
</script>